<template>
  <div class="home">
    <!--  -->
    <el-container>
      <!--  -->
      <el-header height="80px">
        <el-row>
          <!-- 左 -->
          <el-col :span="12">
            <div class="el-header-left" :v-model="sysName">{{ sysName }}</div>
          </el-col>
          <!-- 右 -->
          <el-col :span="12">
            <div class="el-header-right">
              <el-avatar :size="40" :src="circleUrl"></el-avatar>
              <span>{{ name }}</span>
              <el-dropdown @command="to">
                <i class="el-icon-setting"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a"
                    ><i class="el-icon-edit"></i>修改密码</el-dropdown-item
                  >
                  <el-dropdown-item command="b"
                    ><i class="el-icon-switch-button"></i
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div></el-col
          >
        </el-row>
      </el-header>
      <!-- 主页内容 -->
      <el-container>
        <!-- 左边 -->
        <el-aside width="220px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :router="true"
          >
            <el-menu-item index="/home/Kzt">
              <i class="el-icon-s-home"></i>
              <span slot="title">控制台</span>
            </el-menu-item>
            <!-- <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-cooperation"></i>
                <span>装备管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Zbfl">装备分类</el-menu-item>
                <el-menu-item index="/home/Zbgl">装备管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>仓库管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Hwxx">货物信息</el-menu-item>
                <el-menu-item index="/home/Qcfl">器材分类</el-menu-item>
                <el-menu-item index="/home/Qcgl">器材管理</el-menu-item>
                <el-menu-item index="/home/Rkgl">入库管理</el-menu-item>
                <el-menu-item index="/home/Bmll">部门领料</el-menu-item>
                <el-menu-item index="/home/Bmtl">部门退料</el-menu-item>
                <el-menu-item index="/home/Kcpd">库存盘点</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-open"></i>
                <span>维修管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Wxjh">维修计划</el-menu-item>
                <el-menu-item index="/home/Wxjl">维修记录</el-menu-item>
                <el-menu-item index="/home/Wxda">维修档案</el-menu-item>
                <el-menu-item index="/home/Wxzl">维修质量</el-menu-item>
                <el-menu-item index="/home/Wxjf">维修经费</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>人员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Ryxx">人员信息</el-menu-item>
                <el-menu-item index="/home/Kqgl">考勤管理</el-menu-item>
                <el-menu-item index="/home/Wxgd">维修工单</el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-coin"></i>
                <span>数据统计</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Wxltj">维修量统计</el-menu-item>
                <el-menu-item index="/home/Wxjftj">维修经费统计</el-menu-item>
                <el-menu-item index="/home/Wxxjx">维修线绩效</el-menu-item>
                <el-menu-item index="/home/Wxryjx">维修人员绩效</el-menu-item>
                <el-menu-item index="/home/Fxltj">返修率统计</el-menu-item>
                <el-menu-item index="/home/Zbgzph">装备故障排行</el-menu-item>
                <el-menu-item index="/home/Qcdyph">器材调用排行</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-reading"></i>
                <span>技术资料</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Zllx">资料类型</el-menu-item>
                <el-menu-item index="/home/Zlgl">资料管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <!-- <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-collection"></i>
                <span>规章制度</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Fglx">法规类型</el-menu-item>
                <el-menu-item index="/home/Fggl">法规管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <!-- <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/Yhgl">用户管理</el-menu-item>
                <el-menu-item index="/home/Jsgl">角色管理</el-menu-item>
                <el-menu-item index="/home/Xtsz">系统设置</el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <el-submenu :index="v.title" v-for="v in router" :key="v.title">
              <template slot="title">
                <i :class="v.icon"></i>
                <span>{{ v.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :key="n.com"
                  :index="n.href"
                  v-for="n in v.children"
                  >{{ n.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 内容 -->
        <el-main>
          <div class="content-box">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Index from "@/components/Index.vue";

export default {
  name: "Index",
  components: {
    Index,
  },
  data: function () {
    return {
      circleUrl:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      router:[],
      sysName:'',
      name:'',
    };
  },
  methods: {
    getData: function () {
      this.$axios({
        url: "/sys/list",
        methods: "get",
      }).then((res) => {
        if (res.data.code == 0) {
          this.sysName = res.data.data[0].sysName;
        } else {
          console.log("sb");
        }
      });
    },
    toChangePass() {
      this.$router.push("/home/ChangePass");
    },
    toLogin() {
      this.$router.replace("/");
    },
    to(command) {
      switch (command) {
        case "a":
          this.$router.push("/home/ChangePass");
          break;
        case "b":
          this.$router.push("/");
          sessionStorage.clear();
          break;
      }
    },
  },
  mounted: function () {
    // console.log(JSON.parse(sessionStorage.getItem('user')));
    this.router = JSON.parse(sessionStorage.getItem("user"))[0].routing;
    this.name = JSON.parse(sessionStorage.getItem("user"))[0].userName;
    this.getData();
  },

};
</script>


<style lang="less" scoped>
.home {
  .el-container {
    height: 100vh;
  }
  .el-header {
    background-color: #4985fb;
    color: #fff;
    line-height: 80px;
    font-size: 20px;

    .el-header-left {
      text-align: left;
      padding-left: 5px;
      color: #fff;
    }
    .el-header-right {
      text-align: right;
      padding-right: 20px;
    }
    .el-icon-setting {
      font-size: 20px;
      margin-left: 15px;
      color: #fff;
    }
    .el-avatar {
      vertical-align: middle;
      line-height: 70px;
      margin-right: 10px;
    }
  }
  // 左边
  .el-aside {
    background-color: #ffffff;
    color: #333;
    .el-menu {
      border: none;

      .el-menu-item {
        padding-left: 20px;
      }
      // .el-submenu {
      //  // padding-left: 20px;
      // }
    }
  }
  // 内容
  .el-main {
    background-color: #f1f1f2;
    color: #333;
    .content-box {
      background-color: #fff;
      border-radius: 10px;
      height: auto;
      min-height: 100%;
      min-width: 1200px;
    }
  }
}
</style>